# Table

## Import

```jsx
import { Table } from 'bumbag'
```

## Usage

```jsx-live
<Table>
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot fontWeight="semibold">
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell />
      <Table.Cell textAlign="right">$36.00</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>
```

### Dividers

You can add dividers to the rows of your table with the `hasDividers` prop.

```jsx-live
<Table hasDividers>
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot fontWeight="semibold">
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell />
      <Table.Cell textAlign="right">$36.00</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>
```

### Striped

You can stripe your rows with the `isStriped` prop.

```jsx-live
<Table isStriped>
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot fontWeight="semibold">
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell />
      <Table.Cell textAlign="right">$36.00</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>
```

### Hoverable

Make the rows of your table hoverable with the `isHoverable` prop.

```jsx-live
<Table isHoverable>
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot fontWeight="semibold">
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell />
      <Table.Cell textAlign="right">$36.00</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>
```

### Variants

The `<Table>` component comes with two default variants: `minimal` and `shadowed`.

You can also [create your own table variant](/variants).

#### Minimal

The `minimal` variant renders a table with minimal styling.

```jsx-live
<Table variant="minimal">
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot fontWeight="semibold">
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell />
      <Table.Cell textAlign="right">$36.00</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>
```

#### Shadowed

The `shadowed` variant renders a table with a lifted altitude.

```jsx-live
<Table variant="shadowed">
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot fontWeight="semibold">
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell />
      <Table.Cell textAlign="right">$36.00</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>
```

### Responsive

When an `isResponsive` prop is attached to a table. When the table reaches the `mobile` breakpoint, it will collapse itself to a condensed version.

```jsx-live
<Table isResponsive>
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
```

You can change the responsive breakpoints using the `responsiveBreakpoint` prop.

```jsx-live
<Table isResponsive responsiveBreakpoint="tablet">
  <Table.Head>
    <Table.Row>
      <Table.HeadCell>Name</Table.HeadCell>
      <Table.HeadCell textAlign="right">Quantity</Table.HeadCell>
      <Table.HeadCell textAlign="right">Price</Table.HeadCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Nike</Table.Cell>
      <Table.Cell textAlign="right">3</Table.Cell>
      <Table.Cell textAlign="right">$9.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Adidas</Table.Cell>
      <Table.Cell textAlign="right">4</Table.Cell>
      <Table.Cell textAlign="right">$12.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>North Face</Table.Cell>
      <Table.Cell textAlign="right">5</Table.Cell>
      <Table.Cell textAlign="right">$15.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
```

## Props

### Table Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">hasDividers</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the table should have dividers.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isStriped</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the table should be striped.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isHoverable</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the table should be hoverable.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isResponsive</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the table should be responsive.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">responsiveBreakpoint</Code>** <Code fontSize="100" palette="primary">string</Code> 

Indicates breakpoint at which the table should become responsive.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "shadowed"
  | "minimal"`}
</Code>

Sets the variant of the table.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### Table.Head Props

<!-- Automatically generated -->

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### Table.HeadCell Props

<!-- Automatically generated -->

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### Table.Body Props

<!-- Automatically generated -->

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### Table.Row Props

<!-- Automatically generated -->

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### Table.Cell Props

<!-- Automatically generated -->

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### Table.Foot Props

<!-- Automatically generated -->

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

<Theme component="div" overrides={['Table.styles.base', 'Table.Head.styles.base', 'Table.HeadCell.styles.base', 'Table.Body.styles.base', 'Table.Row.styles.base', 'Table.Cell.styles.base', 'Table.Foot.styles.base', 'Table.styles.responsive.base', 'Table.styles.responsive.headCellText']}>
  {props => (
    <Table overrides={props.overrides} isResponsive>
      <TableHead>
        <TableRow>
          <TableHeadCell>Name</TableHeadCell>
          <TableHeadCell textAlign="right">Quantity</TableHeadCell>
          <TableHeadCell textAlign="right">Price</TableHeadCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Nike</TableCell>
          <TableCell textAlign="right">3</TableCell>
          <TableCell textAlign="right">$9.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Adidas</TableCell>
          <TableCell textAlign="right">4</TableCell>
          <TableCell textAlign="right">$12.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>North Face</TableCell>
          <TableCell textAlign="right">5</TableCell>
          <TableCell textAlign="right">$15.00</TableCell>
        </TableRow>
      </TableBody>
      <TableFoot fontWeight="semibold">
        <TableRow>
          <TableCell>Total</TableCell>
          <TableCell />
          <TableCell textAlign="right">$36.00</TableCell>
        </TableRow>
      </TableFoot>
    </Table>
  )}
</Theme>
